<style lang="scss" scoped>
// @media (max-width: 768px) {
//   .my {
//     flex-direction: column; /* 竖直排列 */
//   }
// }
.my {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #ceeafc, white);
    overflow: hidden;
    overflow-y: scroll;

    .my1 {
        position: relative;
        width: 100%;
        height: 150px;
        display: flex;
        justify-content: space-between;

        .my-box {
            width: 100%;
            height: 100px;
            display: flex;
            margin: 0 10px;
            margin: 50px 10px;

            .my-box1 {
                img {
                    width: 80px;
                    height: 80px;
                    background: #ccc;
                    border-radius: 50%;
                }

            }

            .my-box2 {
                width: 100%;
                height: 50px;
                position: relative;

                p {
                    position: absolute;
                    width: 100px;
                    height: 50px;
                    top: 0px;
                    left: 0px;
                    font-size: 20px;

                    font-size: 14px;
                }

                margin: 10px 10px;

                .my-box3 {
                    position: absolute;
                    top: 20px;
                    left: 0px;
                    height: 30px;
                    border: 2px solid #ccc;
                    font-size: 12px;
                    text-align: center;
                    line-height: 30px;
                    border-radius: 10px;
                }
            }
        }

        .right {
            position: relative;
            width: 100%;
            height: 30px;
            margin-top: 20px;

            .right1 {
                display: block;
                position: absolute;
                width: 50%;
                right: 30px;
                top: 20px;
                height: 30px;
                border: 2px solid #ccc;
                font-size: 12px;
                text-align: center;
                line-height: 25px;
                border-radius: 30px;
            }
        }

        .my-box5 {
            position: absolute;
            right: 0px;
            top: 40px;

            font-size: 24px;
        }
    }


    .center-box {
        position: relative;
        width: 100%;
        height: 60px;
    }

    .center-box1 {
        position: absolute;
        top: 15px;
        left: 0px;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        font-size: 16px
    }

    .center-box2 {
        position: absolute;
        top: 15px;
        right: 30px;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        font-size: 16px
    }

    .center-box3 {
        position: absolute;
        top: 17px;
        right: 10px;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        font-size: 16px
    }



    .register {
        position: relative;
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .register-title {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            display: inline-block;
            width: 100%;
            height: 80px;

            img {
                position: absolute;
                width: 30px;
                height: 30px;
            }

            .span6 {
                position: absolute;
                font-size: 16px;
                left: 40px;
                top: 8px;
            }

            .span7 {
                position: absolute;
                font-size: 16px;
                right: 0px;
                top: 10px;
            }
        }

    }

    .below {
        padding: 10px;
        position: relative;
        width: 100%;
        height: 100px;
        display: flex;

        .bleow-left {
            position: absolute;
            display: flex;
            align-items: center;
            width: 45%;
            height: 100px;
            background: linear-gradient(to bottom, #b2f2b2, #e6f9e6);
            border-radius: 15px;

            .p1 {
                position: absolute;
                font-size: 14px;
                left: 55px;
                top: 30px
            }

            .p2 {
                position: absolute;
                font-size: 12px;
                top: 50px;
                left: 56px;
                color: #ccc;
            }

            img {
                position: absolute;
                width: 40px;
                height: 40px;
                margin-left: 10px
            }
        }

        .bleow-right {
            position: absolute;
            display: flex;
            right: 0;
            margin-right: 10px;
            align-items: center;
            width: 40%;
            height: 100px;
            background: linear-gradient(to bottom, #b2f2b2, #e6f9e6);
            border-radius: 15px;

            .p3 {
                position: absolute;
                font-size: 14px;
                left: 55px;
                top: 30px
            }

            .p4 {
                position: absolute;
                font-size: 12px;
                top: 50px;
                left: 56px;
                color: #ccc;
            }

            img {
                position: absolute;
                width: 40px;
                height: 40px;
                margin-left: 10px
            }
        }

    }

    .grid {
        position: relative;
        width: 100%;
        height: 150px;
        background: white;

        .grid-item {
            position: absolute;
            top: 0px;
            left: 0;
            height: 150px;
            width: 25%;

            img {
                position: absolute;
                top: 20px;
                left: 30%;
                width: 40px;
                height: 40px;
            }

            text {
                position: absolute;
                top: 70px;
                left: 32%;
                font-size: 16px;
            }
        }

        .grid-item1 {
            position: absolute;
            top: 0px;
            left: 25%;
            height: 150px;
            width: 25%;

            img {
                position: absolute;
                top: 20px;
                left: 20px;
                width: 40px;
                height: 40px;
            }

            text {
                position: absolute;
                top: 70px;
                left: 25%;
                font-size: 16px;
            }
        }

        .grid-item2 {
            position: absolute;
            top: 0px;
            left: 50%;
            height: 150px;
            width: 25%;

            img {
                position: absolute;
                top: 20px;
                left: 30%;
                width: 40px;
                height: 40px;
            }

            text {
                position: absolute;
                top: 70px;
                left: 32%;
                font-size: 16px;

            }
        }

        .grid-item3 {
            position: absolute;
            top: 0px;
            right: 0px;
            height: 150px;
            width: 25%;

            img {
                position: absolute;
                top: 20px;
                left: 30px;
                width: 40px;
                height: 40px;
            }

            text {
                position: absolute;
                top: 70px;
                left: 32%;
                font-size: 16px;
            }
        }
    }

    .signin {
        display: flex;
        justify-content: space-between;
        position: relative;
        width: 100%;
        height: 100px;
        margin-top: 20px;
        padding: 10px;

        .signin-item {
            position: absolute;
            display: flex;
            // background: red;
            width: 30%;
            text-align: center;
            align-items: center;
            height: 30px;
            left: 0;
            top: 0;

            img {
                position: absolute;
                width: 30px;
                height: 30px;

            }

            .span1 {
                position: absolute;
                font-size: 16px;
                left: 30px;
            }

            .span2 {
                position: absolute;
                top: 8px;
                left: 85px;
                font-size: 14px;
            }
        }

        .signin-item1 {
            position: absolute;
            display: flex;
            // background: red;
            width: 30%;
            align-items: center;
            height: 30px;
            right: 0;
            top: 0;

            img {
                position: absolute;
                width: 30px;
                height: 30px;

            }

            .span3 {
                position: absolute;
                font-size: 16px;
                left: 30px;
            }

            .span4 {
                position: absolute;
                top: 8px;
                left: 85px;
                font-size: 14px;
            }
        }
    }

    .server {
        position: absolute;
        width: 100%;
        height: 30%;

        flex-wrap: wrap;

        .server-item {
            // width: 50%;
            height: 150px;

            img {
                position: absolute;
                top: 30px;
                left: 40%;
                width: 40px;
                height: 40px;

            }

            text {
                position: absolute;
                top: 80px;
                left: 30%;
                font-size: 16px;
            }
        }
    }
}
</style>
<template>
    <div class="my">
        <van-nav-bar title="我的" />
        <div class="my1">
            <div class="my-box" v-if="user">
                <div class="my-box1">
                    <img :src="user.avatar" alt="">
                </div>
                <div class="my-box2">
                    <p><b>{{ user.nickName }}<van-icon name="play" /></b></p>
                    <div class="my-box3">
                        常用就诊人</div>
                </div>
            </div>
            <div class="my-box" v-else>
                <div class="my-box1">
                    <img src="../../views/image/1.png" alt="">
                </div>
                <div class="my-box2">
                    <p @click="gologin"><b>登录/注册<van-icon name="play" /></b></p>
                    <div class="my-box3">
                        常用就诊人</div>
                </div>
            </div>
            <div class="right">
                <span class="right1" @click="gohuiyuan">兑换会员</span>
            </div>
            <div class="my-box5" @click="goedit">
                <van-icon name="setting-o"  style="padding: 0px5px;"/>
            </div>

        </div>
        <div class="center-box">
            <span class="center-box1">我的订单</span> <span class="center-box2" @click="ping">评价中心</span><span class="center-box3">
                <van-icon name="arrow" /></span>
        </div>
        <van-grid class="grid">
            <van-grid-item class="grid-item">
                <img src="https://kano.guahao.com/RO7505058185" alt="item-logo" data-v-194d106b="" data-v-a5c9556e="">
                <text>问诊</text>
            </van-grid-item>
            <van-grid-item class="grid-item1">
                <img src="https://kano.guahao.com/iS4505062926" alt="item-logo" data-v-194d106b="" data-v-a5c9556e="">
                <text>处方</text>
            </van-grid-item>
            <van-grid-item class="grid-item2">
                <img src="https://kano.guahao.com/cP4505068139" alt="item-logo" data-v-194d106b="" data-v-a5c9556e="">
                <text>药店</text>
            </van-grid-item>
            <van-grid-item class="grid-item3">
                <img src="https://kano.guahao.com/gEv505065748" alt="item-logo" data-v-194d106b="" data-v-a5c9556e="">
                <text>其他</text>
            </van-grid-item>
        </van-grid>
        <div class="signin">
            <div class="signin-item">
                <img src="https://kano.guahao.com/RfA644797204" data-v-7d4770c3="">
                <span class="span1">健康币0</span><span class="span2"><van-icon name="arrow" /></span>
            </div>
            <div class="signin-item1">
                <img src="https://kano.guahao.com/BSA644794547" data-v-7d4770c3="">
                <span class="span3">优惠券0</span><span class="span4"><van-icon name="arrow" /></span>
            </div>
            <div>

            </div>
        </div>

        <div class="register">
            <div class="register-title">
                <img data-v-aacd2380="" src="https://kano.guahao.com/x6V644800939" alt="icon">
                <span class="span6">我的挂号</span><span class="span7"><van-icon name="arrow" /></span>

            </div>



        </div>
        <div class="below">
            <div class="bleow-left" @click="goToDoctor">
                <img data-v-aacd2380="" src="https://kano.guahao.com/gIP644801892" alt="icon">
                <p class="p1">我的医生</p>
                <p class="p2">一键在线复诊</p>
            </div>
            <div class="bleow-right" @click="getTodocor">

                <img data-v-aacd2380="" src="https://kano.guahao.com/gIP644801892" alt="icon">
                <p class="p3">会员中心</p>
                <p class="p4">精选权益超值享</p>
            </div>
        </div>
        <div class="server">
            <van-grid>
                <van-grid-item v-for="(item, index) in iconlist" :key="index" class="server-item"
                    @click="togage(item.title)">
                    <img :src="item.image" alt="">
                    <text style="font-size: 14px;">{{ item.title }}</text>
                </van-grid-item>
            </van-grid>
        </div>

    </div>
</template>
<script lang="ts" setup>
import axios from '../../utils/request'
// import { play, settingo, arrow } from 'vant';
// import { Grid, GridItem } from 'vant';
import { ref } from 'vue';
import { MenuRoutes } from '../../router/index'
import { useRouter } from 'vue-router';
const user = JSON.parse(localStorage.getItem('user') as string)
const iconlist: any = ref([])
const router = useRouter()
const gologin = () => {
    router.push('/login')
}

// 底部渲染图标
const iconList = async () => {
    const res = await axios.get('/api/v1/userMenu')
    iconlist.value = res.data.data
    console.log(res.data.data); 6
}
iconList()
// 底部小组件跳转、
const togage = (title: string) => {
    MenuRoutes.forEach((item) => {
        if (item.meta?.title == title) {
            router.push(item.path)
        }
    })
}

// 跳退出设置
const goedit = () => {
    router.push('/edit')
}
// 跳评价页面
const ping=()=>{
    router.push('/pinglun')
}
// 跳进我的会员
const gohuiyuan=()=>{
    router.push('/index/vip')
}
// 跳转到聊天室
const goToDoctor=()=>{
    router.push('/index/Consultation')
}
// 跳到会员页面
const getTodocor=()=>{
    router.push('/index/vip')
}
</script>
